<template>
	<el-dialog title="" width="60%" visible :show-close="false" :append-to-body="true" class="wrap">
		<i class="el-icon-close close" @click="cancel" style="color: white;"></i>
		<div class="bt">{{vtitle}}</div>
		<div style="overflow: hidden;">
			<div class="topdiv">
				<span>教室</span>
				<el-select v-model="vjsid" multiple placeholder="请选择" @change="search" >
				    <el-option
				      v-for="i in comboxlist"
				      :label="i.jsmc"
				      :value="i.id">
				    </el-option>
				  </el-select>
			</div>
			<div class="topdiv">
				<el-checkbox-group  style='width: 250px;'   @change="getweek" v-model="checkList">
					<el-checkbox label="上午"></el-checkbox>
					<el-checkbox label="下午"></el-checkbox>
					<el-checkbox label="夜晚"></el-checkbox>
				</el-checkbox-group>
			</div>
			<div class="topdiv">
				<el-button size="mini" @click="setbtnday2(-7)" round>上周</el-button>
				<el-date-picker v-model="vtime" type="date" @change="setbtnday()" style="width: 150px;"> </el-date-picker>
				<el-button size="mini" @click="setbtnday2(7)" round>下周</el-button>
			</div>
		</div>
		<hr />
		<table class="tab">
			<tr>
				<td>教室</td>
				<td>
					<div>
						<span style="width: 9%;">&nbsp;&nbsp;</span>
						<span>周一({{butday1}})</span>
						<span>周二({{butday2}})</span>
						<span>周三({{butday3}})</span>
						<span>周四({{butday4}})</span>
						<span>周五({{butday5}})</span>
						<span>周六({{butday6}})</span>
						<span>周日({{butday7}})</span>
					</div>
				</td>
			</tr>
			<tr v-for="v in jskblist">
				<td>{{v.jsmc}}</td>
				<td>

					<div v-if="showsw">
						<span style="width: 9%;">上午</span>
						<span>{{v.line1.sjd1}}</span>
						<span>{{v.line1.sjd2}}</span>
						<span>{{v.line1.sjd3}}</span>
						<span>{{v.line1.sjd4}}</span>
						<span>{{v.line1.sjd5}}</span>
						<span>{{v.line1.sjd6}}</span>
						<span>{{v.line1.sjd7}}</span>
					</div>
					<div v-if="showxw">
						<span style="width: 9%;">下午</span>
						<span>{{v.line2.sjd1}}</span>
						<span>{{v.line2.sjd2}}</span>
						<span>{{v.line2.sjd3}}</span>
						<span>{{v.line2.sjd4}}</span>
						<span>{{v.line2.sjd5}}</span>
						<span>{{v.line2.sjd6}}</span>
						<span>{{v.line2.sjd7}}</span>
					</div>
					<div v-if="showyw">
						<span style="width: 9%;">夜晚</span>
						 <!--<el-tooltip class="item" effect="dark" :content="v.line3.sjd1" placement="top-start">-->
							<span>{{v.line3.sjd1}}</span>
						 <!--</el-tooltip>-->
						<span>{{v.line3.sjd2}}</span>
						<span>{{v.line3.sjd3}}</span>
						<span>{{v.line3.sjd4}}</span>
						<span>{{v.line3.sjd5}}</span>
						<span>{{v.line3.sjd6}}</span>
						<span>{{v.line3.sjd7}}</span>
					</div>

				</td>
			</tr>
		</table>

	</el-dialog>
</template>
<script type="text/javascript">
	import qs from 'qs'
	export default {
		props: ['params'],
		data() {
			return {
				vjsid:'',
				vtitle: '查看教室空闲时间',
				btnshowkb: false,
				showsw:true,
				showxw:true,
				showyw:true,
				comboxlist: [],
				butvallist: [],
				checkList: ['上午','下午','夜晚'],
				vtime: '',
				butday1: '',
				butday2: '',
				butday3: '',
				butday4: '',
				butday5: '',
				butday6: '',
				butday7: '',
				jskblist:[],
				portComponents: {

				},

			}
		},

		created() { 
			this.search()
			this.setbtnday2(0);
			this.getcomboxlist(); //laoshi
		},

		methods: {
			getcomboxlist() {
				var logininfo = JSON.parse(localStorage.logininfo);
				this.searchLoading = true;
				var params2 = qs.stringify({
					yhid: logininfo.id,
					xxid: logininfo.xxid
				})
				//执行
				this.axios.post(this.$store.state.api + 'xxjs/getjsxlk', params2)
					.then(res => { 
						let data = res.data.data;
						let list = data.list;
						this.comboxlist = list; 
					}).catch(res => { 
						this.searchLoading = false;
					})
			},
			getweek(){
					if(this.checkList.indexOf("上午") == -1){
						this.showsw=false
					}else{
						this.showsw=true
					}
					if(this.checkList.indexOf("下午") == -1){
						this.showxw=false
					}else{
						this.showxw=true
					}
					if(this.checkList.indexOf("夜晚") == -1){
						this.showyw=false
					}else{
						this.showyw=true
					}
			},
			search() {
				var logininfo = JSON.parse(localStorage.logininfo); 
				this.searchLoading = true;
				var params2 = qs.stringify({
					bjtime:this.butvallist[0]+'',
					edtime:this.butvallist[6]+'', 
					jsids:this.vjsid+'',
					xxid: logininfo.xxid,
					yhid: logininfo.id,
					sd:this.checkList+'',
				})
				//执行
				this.axios.post(this.$store.state.api + 'xxjs/getjskxlist', params2)
					.then(res => { 
//						console.log(res,'wwwwwwwwwwwwwww')
						var rlst =[];
						var lso ={jsmc:'',list1:[],list2:[],list3:[]};
						var lst= res.data.data.list;
						var tempjsmc ='';
						for(let i in lst){
							if (tempjsmc!=lst[i].jsmc){
								lso ={jsmc:'',line1:{},line2:{},line3:{} }; 
								lso.jsmc =lst[i].jsmc; 
								rlst.push(lso);
							}
							if (lst[i].sd=='上午'){
								lso.line1=lst[i];
							} else if (lst[i].sd=='下午'){
								lso.line2=lst[i];
							}  else if (lst[i].sd=='夜晚'){
								lso.line3=lst[i];
							} 
						 tempjsmc =lst[i].jsmc;
					    }
						this.jskblist =rlst; 
						this.searchLoading = false; 
					}).catch(res => {})
			},
		
			
		
			cancel() {
				this.$emit('close', {
					type: 'edit',
					cancel: true
				})
			},
			addDate(date, days) {
				var d = new Date(date);
				d.setDate(d.getDate() + days);
				return d
			},
			getFormatDatemmdd(date) {
				var seperator1 = "-";
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				var strDate = date.getDate();
				if(month >= 1 && month <= 9) {
					month = "0" + month;
				}
				if(strDate >= 0 && strDate <= 9) {
					strDate = "0" + strDate;
				} 
				var currentdate = month + seperator1 + strDate;
				return currentdate;
			},
			getFormatDate(date) {
				var seperator1 = "-";
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				var strDate = date.getDate();
				if(month >= 1 && month <= 9) {
					month = "0" + month;
				}
				if(strDate >= 0 && strDate <= 9) {
					strDate = "0" + strDate;
				}
				var currentdate = year + seperator1 + month + seperator1 + strDate;
				return currentdate;
			},setbtnday2(wekstep){
				if(wekstep == 0) {
					this.wek = 0; 
				} else {
					this.wek = this.wek + wekstep;
				}  
			    var dd = this.addDate(new Date(), this.wek);
				this.vtime = this.getFormatDate(dd); 
				this.setbtnday();
			},
			setbtnday() { 
					
				this.butvallist = [];
				var d = this.addDate(new Date(), this.wek);
				var wk = d.getDay();
				var dd = this.addDate(d, (1 - wk));
				this.butday1 = this.getFormatDatemmdd(dd);
				this.butvallist.push(this.getFormatDate(dd));
				dd = this.addDate(d, (2 - wk));
				this.butday2 = this.getFormatDatemmdd(dd);
				this.butvallist.push(this.getFormatDate(dd));
				dd = this.addDate(d, (3 - wk));
				this.butday3 = this.getFormatDatemmdd(dd);
				this.butvallist.push(this.getFormatDate(dd));
				dd = this.addDate(d, (4 - wk));
				this.butday4 = this.getFormatDatemmdd(dd);
				this.butvallist.push(this.getFormatDate(dd));
				dd = this.addDate(d, (5 - wk));
				this.butday5 = this.getFormatDatemmdd(dd);
				this.butvallist.push(this.getFormatDate(dd));
				dd = this.addDate(d, (6 - wk));
				this.butday6 = this.getFormatDatemmdd(dd);
				this.butvallist.push(this.getFormatDate(dd));
				dd = this.addDate(d, (7 - wk));
				this.butday7 = this.getFormatDatemmdd(dd);
				this.butvallist.push(this.getFormatDate(dd));
				this.search()
			},
			/* 组件的弹框  */
			componentsShow(type, data) { //显示组件
				for(let i in this.portComponents) {
					if(type == this.portComponents[i].type) {
						this.portComponents[i].toggle = true;
						this.portComponents[i].params = data;
						if(this.portComponents[i].data.type == 'single') {
							this.portComponents[i].data.index = data.row.id
						} else if(this.portComponents[i].data.type == 'multiple') {
							this.portComponents[i].data.index = this.multipleDelNum;
						} else {
							return;
						}
						return;
					}
				}
			},
			componentsHide(setting) { //关闭组件
				for(let i in this.portComponents) {
					if(setting.type == this.portComponents[i].type) {
						this.portComponents[i].toggle = false;
						if(!setting.cancel) {
							this.search();
						}
						return;
					}
				}
			}
		}
	}
</script>
<style lang="less" scoped>
	.wrap {
		.topdiv {
			float: left;
			margin-left: 20px;
			height: 50px;
			line-height: 50px;
			
		}
		.close{
				z-index: 10;
				position: absolute;
		}
		.bt {
			position: absolute;
			width: 100%;
			height: 50px;
			margin: 0 auto;
			top: 0;
			left: 0;
			background: #50BFFF;
			color: white;
			text-align: left;
			line-height: 50px;
			font-size: 17px;
			padding-left: 15px;
		}
		.tab {
			width: 93%;
			margin: 0 auto;
			border: 1px solid #D8DCE5;
			margin-top: 10px;
			tr {
				border: 1px solid #D8DCE5;
			}
			td {
				text-align: center;
				border: 1px solid #D8DCE5;
				div {
					height: 50px;
					/*border: 1px solid #D8DCE5;*/
					line-height: 50px;
					overflow: hidden;
					span{
						width: 13%;
						height: 50px;
						border: 1px solid #D8DCE5;
						/*$width: width:calc(100% - 50px);*/ 
						 /*width: $width/2;*/ 
						float: left;
					}
				}
			}
		}
	}
</style>